<template>
  <div class="container">
    <div style="">
      <div class="content_box">
        <div style="width: 47%;">
          <p>实验室检测服务前</p>
          <div class="card_content" v-if="archiveFirst.sugarCheckDate">
            <div class="item">
              <span style="font-size: 16px;color: #000;">血糖检查</span>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-if="archiveFirst.sugarCheckDate != null">
                  检查日期： {{ archiveFirst.sugarCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.sugarFasting != null">
                  空腹血糖： {{ archiveFirst.sugarFasting }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.sugarRandom != null">
                  随机血糖： {{ archiveFirst.sugarRandom }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.sugarAfter2 != null">
                  餐后2h血糖： {{ archiveFirst.sugarAfter2 }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.hba1c != null">
                  HbA1c： {{ archiveFirst.hba1c }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.sugarCheckDate !== null && archiveFirst.sugarCheckDate !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">血脂检查</span>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-if="archiveFirst.bloodFatCheckDate != null">
                  总胆固醇TC检查日期： {{ archiveFirst.bloodFatCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.tc != null">
                  总胆固醇TC： {{ archiveFirst.tc }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.tg != null"
                  >甘油三酯TG： {{ archiveFirst.tg }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.ldlc != null"
                  >低密度脂蛋白LDL-C： {{ archiveFirst.ldlc }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.hdlc != null"
                  >高密度脂蛋白HDL-C： {{ archiveFirst.hdlc }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.nonHdlc != null"
                  >非高密度脂蛋白nonHDL-C： {{ archiveFirst.nonHdlc }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.liverFunctionCheckDate !== null && archiveFirst.liverFunctionCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">肝功能检查</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.liverFunctionCheckDate !== null && archiveFirst.liverFunctionCheckDate !== '——'"
                  >检查日期： {{ archiveFirst.liverFunctionCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.alt !== null && archiveFirst.alt !== '——'"
                  >谷丙转氨酶ALT： {{ archiveFirst.alt }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.ast !== null && archiveFirst.ast !== '——'"
                  >谷草转氨酶AST： {{ archiveFirst.ast }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.tbil !== null && archiveFirst.tbil !== '——'"
                  >总胆红素T-BIL： {{ archiveFirst.tbil }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.alp !== null && archiveFirst.alp !== '——'"
                  >碱性磷酸酶ALP： {{ archiveFirst.alp }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.kidneyFunctionCheckDate !== null && archiveFirst.kidneyFunctionCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">肾功能检查</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.kidneyFunctionCheckDate !== null && archiveFirst.kidneyFunctionCheckDate !== '——'"
                  >检查日期： {{ archiveFirst.kidneyFunctionCheckDate }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.urineProtein !== null && archiveFirst.urineProtein !== '——'"
                  >尿常规_尿蛋白： {{ archiveFirst.urineProtein }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.uae !== null && archiveFirst.uae !== '——'"
                  >尿微量白蛋白UAE： {{ archiveFirst.uae }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.uae24 !== null && archiveFirst.uae24 !== '——'"
                  >24h尿白蛋白24hUAE： {{ archiveFirst.uae24 }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.acr !== null && archiveFirst.acr !== '——'"
                  >尿白蛋白/尿肌酐ACR： {{ archiveFirst.acr }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.cr !== null && archiveFirst.cr !== '——'"
                  >血清肌酐Cr： {{ archiveFirst.cr }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.ureaNitrogen !== null && archiveFirst.ureaNitrogen !== '——'"
                  >尿素氮： {{ archiveFirst.ureaNitrogen }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.gfr !== null && archiveFirst.gfr !== '——'"
                  >肾小球滤过率GFR： {{ archiveFirst.gfr }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.creatinineRate !== null && archiveFirst.creatinineRate !== '——'"
                  >内生肌酐清除率： {{ archiveFirst.creatinineRate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.bua !== null && archiveFirst.bua !== '——'"
                  >血尿酸： {{ archiveFirst.bua }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.ketoneCheckDate !== null && archiveFirst.ketoneCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">酮体检查</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.ketoneCheckDate !== null && archiveFirst.ketoneCheckDate !== '——'"
                  >检查日期： {{ archiveFirst.ketoneCheckDate }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.bloodKetone !== null && archiveFirst.bloodKetone !== '——'"
                  >血酮体： {{ archiveFirst.bloodKetone }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.urineKetone !== null && archiveFirst.urineKetone !== '——'"
                  >尿酮体： {{ archiveFirst.urineKetone }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.ogttCheckDate !== null && archiveFirst.ogttCheckDate !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">OGTT试验+胰岛功能</span>
            </div>
            <div>
              <span class="item">检查日期：{{ archiveFirst.ogttCheckDate }}</span>
              <div class="chart">
                <div class="unit">单位：nmol/L</div>
                <bar-charts
                  style="margin-bottom:30px"
                  :xAxisData="xAsix"
                  :seriesData="series1"
                  :legend="legend"
                  :yAxisUnit="unit"
                ></bar-charts>
              </div>
              <div class="chart">
                <span class="unit">单位：mlU/L / nmol/L</span>
                <line-charts
                  style="margin-bottom:30px"
                  :x-axis-data="charts1.axisData"
                  :y-axis-unit="charts1.axisUnit"
                  :legend="charts1.legend"
                  :series-data="charts1.seriesData"
                  :position="charts1.position"
                ></line-charts>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.phCheckDate !== null && archiveFirst.phCheckDate !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">血气分析及其他</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveFirst.phCheckDate !== null && archiveFirst.phCheckDate !== '——'"
                  >检查日期： {{ archiveFirst.phCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.ph !== null && archiveFirst.ph !== '——'"
                  >血气分析PH： {{ archiveFirst.ph }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.hco3 !== null && archiveFirst.hco3 !== '——'"
                  >血气分析HCO3： {{ archiveFirst.hco3 }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.na !== null && archiveFirst.na !== '——'"
                  >电解质（Na+）： {{ archiveFirst.na }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.kei !== null && archiveFirst.kei !== '——'"
                  >电解质（K+）： {{ archiveFirst.kei }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveFirst.opp !== null && archiveFirst.opp !== '——'"
                  >血浆渗透压： {{ archiveFirst.opp }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="
                    archiveFirst.ulcerativeDrugSensitivity !== null && archiveFirst.ulcerativeDrugSensitivity !== '——'
                  "
                  >溃疡组织培养药敏试验： {{ archiveFirst.ulcerativeDrugSensitivity }}
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div style="width: 47%;">
          <p>实验室检测服务后</p>
          <div
            class="card_content"
            v-if="archiveSummary.sugarCheckDate !== null && archiveSummary.sugarCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">血糖检查</span>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-if="archiveSummary.sugarCheckDate != null">
                  检查日期： {{ archiveSummary.sugarCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.sugarFasting != null">
                  空腹血糖： {{ archiveSummary.sugarFasting }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.sugarRandom != null">
                  随机血糖： {{ archiveSummary.sugarRandom }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.sugarAfter2 != null">
                  餐后2h血糖： {{ archiveSummary.sugarAfter2 }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.hba1c != null">
                  HbA1c： {{ archiveSummary.hba1c }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.sugarCheckDate !== null && archiveSummary.sugarCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">血脂检查</span>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-if="archiveSummary.bloodFatCheckDate != null">
                  总胆固醇TC检查日期： {{ archiveSummary.bloodFatCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.tc != null">
                  总胆固醇TC： {{ archiveSummary.tc }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.tg != null"
                  >甘油三酯TG： {{ archiveSummary.tg }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.ldlc != null"
                  >低密度脂蛋白LDL-C： {{ archiveSummary.ldlc }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.hdlc != null"
                  >高密度脂蛋白HDL-C： {{ archiveSummary.hdlc }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.nonHdlc != null"
                  >非高密度脂蛋白nonHDL-C： {{ archiveSummary.nonHdlc }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.liverFunctionCheckDate !== null && archiveSummary.liverFunctionCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">肝功能检查</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="
                    archiveSummary.liverFunctionCheckDate !== null && archiveSummary.liverFunctionCheckDate !== '——'
                  "
                  >检查日期： {{ archiveSummary.liverFunctionCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.alt !== null && archiveSummary.alt !== '——'"
                  >谷丙转氨酶ALT： {{ archiveSummary.alt }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.ast !== null && archiveSummary.ast !== '——'"
                  >谷草转氨酶AST： {{ archiveSummary.ast }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.tbil !== null && archiveSummary.tbil !== '——'"
                  >总胆红素T-BIL： {{ archiveSummary.tbil }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.alp !== null && archiveSummary.alp !== '——'"
                  >碱性磷酸酶ALP： {{ archiveSummary.alp }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.kidneyFunctionCheckDate !== null && archiveSummary.kidneyFunctionCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">肾功能检查</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="
                    archiveSummary.kidneyFunctionCheckDate !== null && archiveSummary.kidneyFunctionCheckDate !== '——'
                  "
                  >检查日期： {{ archiveSummary.kidneyFunctionCheckDate }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.urineProtein !== null && archiveSummary.urineProtein !== '——'"
                  >尿常规_尿蛋白： {{ archiveSummary.urineProtein }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.uae !== null && archiveSummary.uae !== '——'"
                  >尿白蛋白UAE： {{ archiveSummary.uae }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.uae24 !== null && archiveSummary.uae24 !== '——'"
                  >24h尿白蛋白24hUAE： {{ archiveSummary.uae24 }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.acr !== null && archiveSummary.acr !== '——'"
                  >尿白蛋白尿肌酐ACR： {{ archiveSummary.acr }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.cr !== null && archiveSummary.cr !== '——'"
                  >血清肌酐Cr： {{ archiveSummary.cr }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.ureaNitrogen !== null && archiveSummary.ureaNitrogen !== '——'"
                  >尿素氮： {{ archiveSummary.ureaNitrogen }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.gfr !== null && archiveSummary.gfr !== '——'"
                  >肾小球滤过率GFR： {{ archiveSummary.gfr }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.creatinineRate !== null && archiveSummary.creatinineRate !== '——'"
                  >内生肌酐清除率： {{ archiveSummary.creatinineRate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.bua !== null && archiveSummary.bua !== '——'"
                  >血尿酸： {{ archiveSummary.bua }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.ketoneCheckDate !== null && archiveSummary.ketoneCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">酮体检查</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.ketoneCheckDate !== null && archiveSummary.ketoneCheckDate !== '——'"
                  >检查日期： {{ archiveSummary.ketoneCheckDate }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.bloodKetone !== null && archiveSummary.bloodKetone !== '——'"
                  >血酮体： {{ archiveSummary.bloodKetone }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.urineKetone !== null && archiveSummary.urineKetone !== '——'"
                  >尿酮体： {{ archiveSummary.urineKetone }}
                </a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.ogttCheckDate !== null && archiveSummary.ogttCheckDate !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">OGTT试验+胰岛功能</span>
            </div>
            <div>
              <span class="item">检查日期：{{ archiveSummary.ogttCheckDate }}</span>
              <div class="chart">
                <div class="unit">单位：nmol/L</div>
                <bar-charts
                  style="margin-bottom:30px"
                  :xAxisData="xAsix"
                  :seriesData="series2"
                  :legend="legend"
                  :yAxisUnit="unit"
                ></bar-charts>
              </div>
              <div class="chart">
                <span class="unit">单位：mlU/L / nmol/L</span>
                <line-charts
                  style="margin-bottom:30px"
                  :x-axis-data="charts2.axisData"
                  :y-axis-unit="charts2.axisUnit"
                  :legend="charts2.legend"
                  :series-data="charts2.seriesData"
                  :position="charts2.position"
                ></line-charts>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.phCheckDate !== null && archiveSummary.phCheckDate !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">血气分析及其他</span>
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-if="archiveSummary.phCheckDate !== null && archiveSummary.phCheckDate !== '——'"
                  >检查日期： {{ archiveSummary.phCheckDate }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.ph !== null && archiveSummary.ph !== '——'"
                  >血气分析PH： {{ archiveSummary.ph }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.hco3 !== null && archiveSummary.hco3 !== '——'"
                  >血气分析HCO3： {{ archiveSummary.hco3 }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.na !== null && archiveSummary.na !== '——'"
                  >电解质（Na+）： {{ archiveSummary.na }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.kei !== null && archiveSummary.kei !== '——'"
                  >电解质（K+）： {{ archiveSummary.kei }}
                </a-col>
                <a-col class="item" :span="24" v-if="archiveSummary.opp !== null && archiveSummary.opp !== '——'"
                  >血浆渗透压： {{ archiveSummary.opp }}
                </a-col>
                <a-col
                  class="item"
                  :span="24"
                  v-if="
                    archiveSummary.ulcerativeDrugSensitivity !== null &&
                      archiveSummary.ulcerativeDrugSensitivity !== '——'
                  "
                  >溃疡组织培养药敏试验： {{ archiveSummary.ulcerativeDrugSensitivity }}
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barCharts from '../../components/barChart'
import lineCharts from '../../components/LineChart'
export default {
  name: 'Laboratory',
  props: ['archiveFirst', 'archiveSummary'],
  components: { barCharts, lineCharts },
  data() {
    return {
      xAsix: ['空腹服糖前', '30min', '1h', '2h', '3h'],
      series1: [],
      series2: [],
      legend: ['血糖'],
      unit: '',
      charts1: {
        axisData: [],
        axisUnit: '',
        seriesData: [],
        legend: ['胰岛素', 'C肽'],
        position: {
          x: 'left',
          y: 'bottom'
        }
      },
      charts2: {
        axisData: [],
        axisUnit: '',
        seriesData: [],
        legend: ['胰岛素', 'C肽'],
        position: {
          x: 'left',
          y: 'bottom'
        }
      }
    }
  },
  mounted() {
    console.log(this.archiveSummary)
    this.series1 = [
      [0, Number(this.archiveFirst?.sugarLimosis?.replace('mmol/L', ''))],
      [1, Number(this.archiveFirst?.sugar30min?.replace('mmol/L', ''))],
      [2, Number(this.archiveFirst?.sugar1h?.replace('mmol/L', ''))],
      [3, Number(this.archiveFirst?.sugar2h?.replace('mmol/L', ''))],
      [4, Number(this.archiveFirst?.sugar3h?.replace('mmol/L', ''))]
    ]
    this.series2 = [
      [0, Number(this.archiveSummary?.sugarLimosis?.replace('mmol/L', ''))],
      [1, Number(this.archiveSummary?.sugar30min?.replace('mmol/L', ''))],
      [2, Number(this.archiveSummary?.sugar1h?.replace('mmol/L', ''))],
      [3, Number(this.archiveSummary?.sugar2h?.replace('mmol/L', ''))],
      [4, Number(this.archiveSummary?.sugar3h?.replace('mmol/L', ''))]
    ]
    this.charts1.axisData = this.archiveFirst?.date
    this.charts1.seriesData.push(this.archiveFirst?.value1)
    this.charts1.seriesData.push(this.archiveFirst?.value2)
    this.charts2.axisData = this.archiveSummary?.date
    this.charts2.seriesData.push(this.archiveSummary?.value1)
    this.charts2.seriesData.push(this.archiveSummary?.value2)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
.container {
  padding: 50px 24px 0 24px;
}
@media print {
  .container {
    page-break-inside: avoid;
  }
  .card_content {
    page-break-inside: avoid;
  }
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
  }
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
.chart {
  position: relative;
}
.unit {
  position: absolute;
  left: 0;
  top: 5px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}
</style>

